<script setup>
import {chamberStore} from '@pi/chamber';
import {userStore} from '@pi/user';
import {onMounted, reactive} from "vue";
import {input, msg} from "@ut/tool.js";
import Building from "@/component/Building.vue";

let chamber = chamberStore();
let user = userStore();
let options = reactive({
    pageNo: 1,
    pageSize: 10
});
let drawer = reactive({
    show: false,
    id: 0,
    open(id) {
        drawer.id = id;
        drawer.show = true;
    }
})

// 添加 or 修改宿舍楼
function open(type = 0, row = {}) {
    input({
        title: type ? '添加宿舍楼' : '修改宿舍楼',
        content: '请输入宿舍楼名称',
        inputValue: type ? row.label : '',
    }).then(async e => {
        if (e) {
            if (type) {
                row.label = e;
                await chamber.update(row)
            } else await chamber.create({label: e});
            chamber.get(options);
        } else msg('输入无效', 'warning')
    })
}

// 删除
async function remove(id) {
    await chamber.remove(id);
    chamber.get(options);
}

onMounted(() => {
    chamber.get(options);
})
</script>

<template>
    <h5 class="title">宿舍楼列表</h5>
    <div class="btn">
        <el-button type="primary" icon="Plus" size="small" plain @click="open()" v-if="user.info.role === 1">添加</el-button>
    </div>
    <el-table :data="chamber.list" style="height: calc(100% - 100px)" size="small" border stripe show-overflow-tooltip>
        <el-table-column prop="id" label="编号" align="center" />
        <el-table-column prop="label" label="楼号" align="center" />
        <el-table-column label="操作" align="center">
            <template #default="{row}">
                <el-button type="primary" link icon="View" @click="drawer.open(row.id)">{{user.info.role === 1 ? '寝室管理' : '查看寝室'}}</el-button>
                <template v-if="user.info.role === 1">
                    <el-button type="warning" link icon="Edit" @click="open(1, row)">修改</el-button>
                    <el-button type="danger" link icon="Delete" @click="remove(row.id)">删除</el-button>
                </template>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="chamber.total" small @current-change="chamber.get(options)" v-model:current-page="options.pageNo" :page-size="options.pageSize" />
    </div>
    <el-drawer v-model="drawer.show" direction="rtl" :with-header="false" size="80%">
        <Building :show="drawer.show" :bid="drawer.id" />
    </el-drawer>
</template>

<style scoped lang="less"></style>